<template>
    <el-menu class="my-menu" :default-active="activePath" :router="true" :ellipsis="false" @select="handleSelect">
        <template v-for="menuItem in menuList" :key="menuItem.path">
            <!-- 没有子项，就渲染menuItem -->
            <el-menu-item v-if="!menuItem.children?.length" :index="menuItem.path" :route="menuItem.path">
                <template #title>
                    {{ menuItem.title }}
                </template>
            </el-menu-item>

            <!-- 有子项就渲染subMenu,再递归渲染 -->
            <el-sub-menu popper-class="nav-trends" v-else :index="menuItem.path">
                <template #title>
                    {{ menuItem.title }}
                </template>
                <NavTrends :menuList="menuItem.children" />
            </el-sub-menu>
        </template>
    </el-menu>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { House, Histogram } from '@element-plus/icons-vue';
import { cellStarts } from 'element-plus/es/components/table/src/config.mjs';
interface MenuItem {
    path: string;
    icon?: any;
    title: string;
    children?: MenuItem[];
}

defineOptions({
    name: 'NavTrends' // 显式声明组件名
});
const props = withDefaults(
    defineProps<{
        menuList?: MenuItem[];
    }>(),
    {
        menuList: () => [
            {
                path: '/',
                icon: House,
                title: '首页'
            },
            {
                path: '/TypeScript',
                title: 'TypeScript专区',
                children: [
                    {
                        path: '/TypeScript1',
                        title: '数据声明'
                    },
                    {
                        path: '/TypeScript2',
                        title: '函数'
                    },
                    {
                        path: '/TypeScript3',
                        title: 'Props/emit/Expose'
                    }
                ]
            },
            // {
            //     path: '/changjing',
            //     icon: Histogram,
            //     title: '场景案例',
            //     children: [
            //         {
            //             path: '/xunigundong',
            //             title: '虚拟滚动'
            //         },
            //         {
            //             path: '/SvgDemo',
            //             title: 'SVG封装'
            //         }
            //     ]
            // },
            {
                path: '/Demo',
                title: 'Vue用法',
                children: [
                    {
                        path: '/Demo1',
                        title: '1.数据渲染'
                    },
                    {
                        path: '/Demo2',
                        title: '2.生命周期'
                    },
                    {
                        path: '/Demo3',
                        title: '3.数据监听'
                    }
                    // {
                    //     path: '/Demo4',
                    //     title: '4.组件通信'
                    // },
                    // {
                    //     path: '/Demo5',
                    //     title: '5.pinia应用'
                    // },
                    // {
                    //     path: '/Demo6',
                    //     title: '6.路由应用'
                    // },
                    // {
                    //     path: '/Demo7',
                    //     title: '7.插槽使用'
                    // },
                    // {
                    //     path: '/Demo8',
                    //     title: '8.全局组件/js库'
                    // },
                    // {
                    //     path: '/Demo9',
                    //     title: '9.递归组件'
                    // },
                    // {
                    //     path: '/Demo10',
                    //     title: '10.axios/alova使用'
                    // },
                    // {
                    //     path: '/Demo11',
                    //     title: '11.vue的混入mixin'
                    // }
                ]
            }
        ]
    }
);

const route = useRoute(); // 获取路由信息 (包含路由name、path、query、params等信息)
const activePath = computed(() => {
    return route.path;
});

const handleSelect = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath);
};
</script>

<style scoped>
.nav-trends .el-menu {
    display: block !important;
}
.nav-trends .el-menu .el-menu-item {
    justify-content: left !important;
}
</style>
